<template>
  <div class="cloudParking">
    <header>
      <el-form :model="searchData" class="searchForm">
        <el-form-item>
          <el-input v-model.trim="searchData.parkName" clearable class="seech1" placeholder="停车场名称" @change="getTableData"/>
        </el-form-item>

        <el-form-item>
          <el-input v-model.trim="searchData.bolianParkId" class="seech1" clearable placeholder="泊链parkId" @change="getTableData" />
        </el-form-item>

        <el-form-item class="seech0">
          <el-select v-model="searchData.isShow" class="seech2" placeholder="线上展示状态" @change="getTableData" clearable>
            <el-option label="正常展示" value="1"/>
            <el-option label="关闭展示" value="0"/>
          </el-select>
        </el-form-item>

        <!-- <el-form-item>
          <el-select
              v-model="searchData.value"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入月租名称"
              :remote-method="remoteMethod"
              :loading="searchLoading">
              <el-option
                v-for="item in searchOptions"
                :key="item.id"
                :label="item.ruleName"
                :value="item.id">
              </el-option>
            </el-select>
        </el-form-item> -->

        <el-form-item style="width: 80px;">
          <el-button type="primary" icon="el-icon-search" @click="getTableData">搜索</el-button>
        </el-form-item>
        <div style="float: right;margin-right: 20px;">
          <el-button type="success" @click="addShow = true" icon="el-icon-circle-plus-outline">新增车场</el-button>
        </div>
      </el-form>

    </header>

    <section>
      <el-table :data="tableData" height="100%" border v-loading="tableLoading">
        <el-table-column prop="parkName" label="停车场名称" align="center" width="160"/>
        <el-table-column prop="parkAddress" label="停车场地址" align="center" width="280" />
        <!-- <el-table-column prop="bolianComId" label="泊链编号" align="center" width="120"/> -->
        <el-table-column prop="bolianParkUnionId" label="泊链ParkUnionId" align="center" width="100" />
        <!-- <el-table-column prop="id" label="停车场ID" align="center" width="140"/> -->
        <el-table-column prop="bolianParkId" label="泊链ParkId" align="center" width="140"/>
        <el-table-column label="更新时间" align="center" width="140">
          <template slot-scope="scope"> {{ scope.row.updateTime | dateTimeFilter }}</template>
        </el-table-column>
        <el-table-column prop="telephone" label="联系电话" align="center" width="110"/>
        <el-table-column label="单双系统" align="center" width="120">
          <template slot-scope="scope"> {{ scope.row.singleDoubleSystem | systemFilter }}</template>
        </el-table-column>
        <el-table-column prop="totalParkSpace" label="总车位" align="center" width="70"/>
        <el-table-column prop="reserveParkSpace" label="预约车位" align="center" width="80"/>
        <el-table-column prop="monthDivide" label="月租费分润" align="center" width="80"/>
        <el-table-column prop="orderDivide" label="停车费分润" align="center" width="80"/>
        <el-table-column prop="priceDesc" label="收费规则" align="center" width="100">
          <template slot-scope="scope">
            <el-popover trigger="hover" width="200">
              <span slot="reference" class="seeRule">查看规则</span>
              <span v-html="scope.row.priceDesc"/>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="展示状态" prop="isShow" align="center" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isShow"
              active-color="#46a6ff"
              inactive-color="#ccc"
              @change="switchStatus(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="160">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="editShow = true,row = scope.row">编辑</el-button>
            <el-button type="primary" size="mini" @click="detailsShow = true,row = scope.row">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <footer>
      <el-pagination
        :hide-on-single-page="false"
        :current-page="searchData.currentPage"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="10"
        background
        style="margin-top:10px;"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

    <el-dialog width="800px" :visible.sync="editShow" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
      <edit v-model="aa" v-if="editShow" :row = "row" @closeDialog="editShow = false"/>
    </el-dialog>

    <el-dialog :visible.sync="detailsShow" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
      <detailsMember v-if="detailsShow" :row = "row" @closeDialog="detailsShow = false"/>
    </el-dialog>

    <el-dialog :visible.sync="addShow" width="740px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
      <addParking v-if="addShow" @closeDialog="addShow = false" @refresh="getTableData"/>
    </el-dialog>

  </div>
</template>

<script>
  import edit from './components/edit.vue'
  import addParking from './components/addParking.vue'
  import detailsMember from './components/detailsMember.vue'
  import { formatDate } from '@/utils/formatDate.js'

  export default {
    name: 'cloudParking',
    components: { edit , addParking , detailsMember},
    data() {
      return {
        aa: '',
        tableData: [],
        searchData: {
          currentPage: 1,
          pageSize: 10,
          isShow: '',
          parkSource: null
        },
        editShow: false,
        detailsShow: false,
        total: 0,
        tableLoading: true,
        addShow: false,
        searchLoading: false,
        searchOptions: [],
      }
    },
    filters: {
      dateTimeFilter(date){
        if(date != null){
          return formatDate(new Date(date), 'yyyy-MM-dd hh:mm')
        }
      },
      systemFilter(system) {
        return system == 1 ? '单系统' : '双系统'
      }
    },
    mounted() {
      this.getTableData();

    },
    methods: {
      getTableData() {
        if(this.searchData.isShow == 'null') {
          this.searchData.isShow = ''
        }
        this.$axios({
          method: 'post',
          url: '/park/park-info/getParkPage',
          data: this.searchData
        }).then((res) => {
          res.data.ipage.records.forEach(item => {
            item.isShow = item.isShow == '1'
          })
          this.tableData = res.data.ipage.records;
          this.total = res.data.ipage.total;
          this.tableLoading = false;
        })
      },
      switchStatus(e) {
        const status = e.isShow == true ? '1' : '0';
        this.$axios({
          method: 'post',
          url: '/park/park-info/switchParkShow',
          data: this.$qs.stringify({ parkId: e.id, isShow: status })
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success('规则状态修改成功！')
          } else {
            this.$message.warning('规则状态修改失败！')
          }
        })
      },
      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.searchData.pageSize = val;
        this.getTableData();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.searchData.currentPage = val;
        this.getTableData();
      },

      remoteMethod(query) {
        this.$axios({
          method: 'post',
          url: '/promotion/month-rule/getMonthName',
          data: {page: 1,size: 10, ruleName: query}
        }).then((res) => {
          console.log(444555,res)
          this.searchOptions = res.data.records;
        })
        // if (query !== '') {
        //   this.searchLoading = true;
        //   setTimeout(() => {
        //     this.searchLoading = false;
        //     this.searchOptions = this.searchList.filter(item => {
        //       return item.label.toLowerCase()
        //         .indexOf(query.toLowerCase()) > -1;
        //     });
        //   }, 200);
        // } else {
        //   this.searchOptions = [];
        // }
      }
    }
  }
</script>

<style scoped>
  .cloudParking {
    height: 100%;
    position: relative;
  }
  header {
    height: 40px;
  }
  footer {
    height: 50px;
    width: 100%;
    position: absolute;
    bottom: -20px;
  }
  section {
    height: calc(100% - 70px);
  }
  .searchForm .el-form-item {
  	width: 220px;
  	display: inline-block;
  }
  .searchForm .seech0 {
    width: 160px;
  }
  .seech1 {
  	width:200px;
  }
  .seech2 {
    width: 140px;
  }




</style>
